<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>财务首页</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
</head>
<style>

/* ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: #a2a2a2;
    border-radius: 2px;
} */
</style>
<body>
	<div class="kb-out-box my-locations-list">
		<div class="sub-nav-bar">
			<div style="position: relative;">
				<div class='sub-nav-list clear-fix' >
					<div class="layui-tab layui-tab-brief" lay-filter="projectNav">
						  <ul class="layui-tab-title">
						   		<li class="layui-this" lay-id="contract">合同</li>
							    <li>账单</li>
							    <li>发票</li>
						  </ul>  
					</div>
				</div>
				<!-- <div class="sub-nav-search">
					<div class="kb_dropdown">
						<a href="" class="kb_dropdown__trigger">
							<div class="search-type">
								<span>会员</span><i class="layui-icon" style="margin-left: 2px; font-size: 10px;">&#xe61a</i>
							</div>
						</a>
						<div class="kb_dropdown__content ">
							<ul class="search-type_content">
								<li>会员</li>
								<li>团队</li>
								<li>账单</li>
							</ul>
						</div>
					</div>
					<input type="text"> 	
				</div> -->
			</div>
		</div>
		<div class="margin-top-lg">
		    <div class="iframe-wrap" style="width:100%;height:100%;position: relative;">
			    <!--  <iframe id="project-iframe" src="" frameborder="0" width="100%" height="100%" scroll="no"></iframe> -->
			</div>
		</div>
	</div>
</body>
<script>
	$(function(){
		//getIframeSrc()//回退的时候根基iframe 的路径匹配对应的tab标签
		layui.use(['element',"layer","form"], function(){
			var layer=layui.layer,form = layui.form, element = layui.element;
			  //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
			  element.on('tab(projectNav)', function(data){
			    var layid = this.getAttribute('lay-id');
			    location.hash = '#'+layid;
			    getSecondHash()//根据路由，显示当前内容
			  }); 
		});
		
		//获取iframehash值，渲染页面(二级导航的显示,iframe的src)
		    getSecondHash()
			function getSecondHash(){
				var layid = location.hash.substr(1),iframeSrc="",hashId='';
				if(layid==""||layid=='undefined'||layid==null||layid=='contract'){//首次进来，合同列表
					iframeSrc='/app/contractInfo/index';
					layid='contract';
					location.hash = 'contract';
				}
				/* if(layid=='setting'){
					iframeSrc='/app/project/setting';
				}
				if(layid=='station'){
					iframeSrc='/app/projectStation/index';
				} */
				
				
				$(".layui-tab-title li[lay-id='"+layid+"']").addClass("layui-this");
			    var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
			    iframe.src = iframeSrc;
			    iframe.width = '100%';
			    iframe.height = '100%';
			    iframe.id = 'project-iframe';
			    $(".iframe-wrap").html($(iframe));
				//$("#project-iframe").attr("src",iframeSrc);	
			}
	})
	//根据iframe 的路径匹配对应的tab标签
	function getIframeSrc(){
		var src=$("#project-iframe").attr("src");
		var layID=src.substring(src.lastIndexOf("/"));
			$(".layui-tab-title li[lay-id='"+layID+"']").addClass("layui-this");
	}
	
</script>
</html>